<template>
	<view class="addaskfor-container">

		<view class="askfor-form">
			<u-calendar :show="calenderShow" @close="closeCalender" @confirm="getCalender"></u-calendar>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">

				</u-col>

				<u-col span="10">
					<u--form labelPosition="left" :model="askfor" :rules="rules" ref="formVisitor"
						:errorType="errorType">


						<u-form-item prop="onsetSymptoms" borderBottom ref="onsetSymptoms">
							<u--input v-model="askfor.onsetSymptoms" border="none" clearable placeholder="请输入发病症状"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>

						<u-form-item prop="diagnose" borderBottom ref="diagnose">
							<u--input v-model="askfor.diagnose" border="none" clearable placeholder="请输入诊断疾病"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>

						<u-form-item prop="diagnosisTime" borderBottom ref="diagnosisTime">
							<u--input v-model="askfor.diagnosisTime" border="none" clearable placeholder="诊断日期"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
								@focus="openDiagnosisCalender()"></u--input>
						</u-form-item>

						<u-form-item prop="morbidityTime" borderBottom ref="morbidityTime">
							<u--input v-model="askfor.morbidityTime" border="none" clearable placeholder="发病日期"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
								@focus="openCalender()"></u--input>
						</u-form-item>


						<u-form-item prop="leaveDetailes" borderBottom ref="leaveDetailes">
							<view class="richtext">
								<piaoyiEditor :values="values" :header="header" v-model="askfor.leaveDetailes"
									:maxlength="3000" @changes="saveContens" :readOnly="readOnly" :photoUrl="photoUrl"
									:api="api" :name="name" />
								<!-- <view class="">
									{{txt}}
								</view> -->
							</view>
						</u-form-item>



						<u-form-item prop="studentName" borderBottom ref="studentName">
							<u--input v-model="askfor.studentName" border="none" clearable placeholder="请输入请假人姓名"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>

						<u-form-item prop="studentTelephone" borderBottom ref="studentTelephone">
							<u--input v-model="askfor.studentTelephone" border="none" clearable placeholder="请输入请假人电话号码"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>

						<u-form-item prop="usersNickTelephone" borderBottom ref="usersNickTelephone">
							<u--input v-model="askfor.usersNickTelephone" border="none" clearable
								placeholder="请输入上报老师电话号码" prefixIcon="account-fill"
								prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>



						<!-- <u-form-item prop="imagersUpload" borderBottom ref="imagersUpload">
							<u--input v-model="askfor.imagersUpload" border="none" clearable placeholder="请选择图片"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
								@focus="getImgUrl"></u--input>
						</u-form-item> -->




						<u-form-item prop="imagersUpload" borderBottom ref="imagersUpload">
							<u-radio-group v-model="askfor.leaveType" placement="row" @change="groupChange">
								<u-radio :customStyle="{marginBottom: '8px',marginRight: '8px'}"
									v-for="(item, index) in radiolist1" :key="index" :label="item.name"
									:name="item.value">
								</u-radio>
							</u-radio-group>
						</u-form-item>



						<!-- 	<u-form-item prop="founder" borderBottom ref="founder">
							<u--input v-model="askfor.founder" border="none" clearable placeholder="请输入发布人"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
						</u-form-item>
 -->

						<u-form-item prop="leaveTimeStart" borderBottom ref="leaveTimeStart">
							<u--input v-model="askfor.leaveTimeStart" border="none" clearable placeholder="请假开始时间"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
								@focus="openleaveTimeStartCalender()"></u--input>
						</u-form-item>
						
						<u-form-item prop="leaveTimeEnd" borderBottom ref="leaveTimeEnd">
							<u--input v-model="askfor.leaveTimeEnd" border="none" clearable placeholder="请假结束时间"
								prefixIcon="account-fill" prefixIconStyle="font-size: 22px;color: #909399"
								@focus="openleaveTimeEndCalender()"></u--input>
						</u-form-item>


					</u--form>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>

				<u-col span="10">
					<u-button type="primary" text="保存" @click="addAskfro"></u-button>
				</u-col>
				<u-col span="1">
					<view class="demo-layout"></view>
				</u-col>
			</u-row>

		</view>
	</view>
</template>

<script>
	import piaoyiEditor from '@/uni_modules/piaoyi-editor/components/piaoyi-editor/piaoyi-editor.vue';
	export default {
		components: {
			piaoyiEditor
		},
		data() {
			return {
				diagnosisCalender: false, // 用于标记当前需要操作的是诊断日期
				leaveTimeStartCalender:false,
				leaveTimeEndCalender:false,
				radiolist1: [{
						name: '事假',
						value: 1
					},
					{
						name: '病假',
						value: 2
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中

				readOnly: false, //是否只读
				photoUrl: 'https://www.gzzyue.com', //服务器图片域名或者ip
				api: '/prod-api/common/upload', //上传图片接口地址
				txt: '',
				name: 'file',
				values: '<div></div>',
				header: {
					'Authorization': uni.getStorageSync("token") //自定义请求头信息
				},
				calenderShow: false,
				askfor: {
					onsetSymptoms: '',
					diagnose: '',
					diagnosisTime: '',
					morbidityTime: '',
					leaveType: '',
					leaveDetailes: '',
					studentName: '',
					studentTelephone: '',
					usersNickTelephone: '',
					leaveTimeStart: '',
					leaveTimeEnd: '',
					releaseStatus: ''
				},
				rules: {
					'studentName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'studentTelephone': {
						type: 'number',
						required: true,
						len: 11,
						message: '手机号码格式不正确',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'usersNickTelephone': {
						type: 'number',
						required: true,
						len: 11,
						message: '手机号码格式不正确',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'intervieweeName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'intervieweePhoneNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'appointmentName': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'visitorIdNumber': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'peer': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},
					'vehicleInformation': {
						type: 'string',
						required: true,
						message: '请填写用户名',
						trigger: ['blur', 'change'] //触发器trigger  当我们失去焦点和文字发生变化的时候
					},

				},
				errorType: 'border-bottom', // 错误提示类型:下划线
			}
		},
		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			// radioChange(n) {
			//   console.log('radioChange', n);
			// },

			// getImgUrl() {
			// 	var _this = this
			// 	uni.chooseImage({
			// 		success: (chooseImageRes) => {
			// 			const tempFilePaths = chooseImageRes.tempFilePaths;
			// 			uni.uploadFile({
			// 				url: 'https://www.gzzyue.com/prod-api/common/upload', //仅为示例，非真实的接口地址
			// 				filePath: tempFilePaths[0],
			// 				name: 'file',
			// 				header: {
			// 					'Authorization': uni.getStorageSync("token") //自定义请求头信息
			// 				},
			// 				success: (uploadFileRes) => {
			// 					console.log(uploadFileRes);
			// 					var obj = JSON.parse(uploadFileRes.data)
			// 					console.log(obj.fileName);
			// 					_this.askfor.imagersUpload = obj.fileName
			// 				}
			// 			});
			// 		}
			// 	});
			// },
			saveContens(e) {
				// this.txt = e.html
				// this.values=e.html
				console.log('输入的内容', e)
				this.askfor.leaveDetailes = e.html
			},
			addAskfro() {
				// console.log('values',this.askfor.releaseStatus)
				uni.request({
					url: 'https://www.gzzyue.com/prod-api/system/leaveManagement',
					// url: 'https://www.gzzyue.com/prod-api/system/campusNotice/api/addAskfro',
					method: 'POST',
					header: {
						'Authorization': uni.getStorageSync("token") //自定义请求头信息
					},
					data: this.askfor,
					success: (res) => {
						console.log('res:', res);
						if (res.statusCode == 200) {
							if (res.data.code == 200) {
								uni.$u.toast('预约成功')
								uni.navigateBack()

								uni.$emit('addAskfro', this.askfor)
							} else if (res.data.code == 500) {
								uni.$u.toast(res.data.msg)
							} else {
								uni.$u.toast('系统服务异常，请联系管理员！')
							}
						} else {
							uni.$u.toast('系统服务异常，请联系管理员！')
						}
					},
					fail: (errors) => {
						console.log('errors:', errors);
						uni.$u.toast('服务器错误，请联系管理员！')
					},
				});
			},
			openCalender() {
				this.calenderShow = true
			},
			closeCalender() {
				this.calenderShow = false
			},
			// openDiagnosisCalender
			openDiagnosisCalender() {
				this.calenderShow = true; // 打开诊断日期的日历选择器
				this.diagnosisCalender = true; // 标记当前需要操作的是诊断日期
			},
			openleaveTimeStartCalender(){
					this.calenderShow = true
					this.leaveTimeStartCalender=true;
			},
			openleaveTimeEndCalender(){
				this.calenderShow = true;
				this.leaveTimeEndCalender=true
			},
			getCalender(e) {
			  console.log('e', e);
			  if (this.diagnosisCalender) {
			    if (this.leaveTimeStartCalender) {
			      this.askfor.leaveTimeStart = e[0]; // 更新请假开始时间
			    } else if (this.leaveTimeEndCalender) {
			      this.askfor.leaveTimeEnd = e[0]; // 更新请假结束时间
			    } else {
			      this.askfor.diagnosisTime = e[0]; // 更新诊断日期
			    }
			  } else {
			    this.askfor.morbidityTime = e[0]; // 更新发病日期
			  }
			  this.closeCalender();
			},
		}
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	button {
		margin-top: 10px;
	}
</style>